import AddressSelect from "@/modules/common/components/address_select";
import ButtonFixed from "@/modules/common/components/button_fixed";
import InventoryCategorySelect from "@/modules/common/components/inventory_category_select";
import InventoryTypeSelect from "@/modules/common/components/inventory_type_select";
import {
  InventoryType,
  WarehouseState,
} from "@/pages/init_base/inventory/utils/columns";
import { isPhoneNumber } from "@/shared/utils";
import {
  Card,
  Checkbox,
  Col,
  Form,
  Input,
  Radio,
  Row,
  Select,
  Space,
} from "antd";
import { useForm } from "antd/lib/form/Form";
import { ReactNode, useEffect, useMemo, useState } from "react";

interface ManageFormProps {
  defaultData: any;
  /**
   * 构造提交数据
   * @param value
   * @param submitType 保存：ok，保存并新增：add
   * @param form
   */
  submitData: (value: any, submitType: "ok" | "add", form: any) => any;
  loading?: boolean;
  type?: string;
}

interface ReturnProps {
  renderManageForm: ReactNode;
}

export default function useManageForm({
  type,
  defaultData,
  loading,
  submitData,
}: ManageFormProps): ReturnProps {
  const [form] = useForm();
  const [warehouseType, setWarehouseType] = useState(1);
  const [isEnabled, setIsEnabled] = useState(undefined);

  const handleOk = (submitType: "ok" | "add") => {
    if (submitType === "add") {
      form.resetFields();
      return;
    }
    form.validateFields().then(() => {
      const value = form.getFieldsValue();
      submitData(value, submitType, form);
    });
  };

  const renderManageForm = useMemo(() => {
    return (
      <div className=" init-base-merchandise-create pb-[64px] relative flex w-full h-full bg-white">
        <Card
          id="info"
          bordered={false}
          style={{ borderRadius: "0px", boxShadow: "none" }}
          bodyStyle={{}}
          title={<span className="card-title">基本信息</span>}
          className="overflow-auto"
        >
          <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            layout="inline"
            form={form}
            name="info"
            initialValues={{
              warehouse_type: InventoryType.INNER,
              department_id: "1",
              principal_id: "1",
              is_enabled: WarehouseState.WAREHOUSE_STATE_ENABLE,
            }}
            onValuesChange={(changedValues) => {
              if (Object.keys(changedValues)[0] === "warehouse_type") {
                setWarehouseType(changedValues.warehouse_type);
                form.setFieldsValue({ customer_id: "1", supplier_id: "1" });
              } else if (Object.keys(changedValues)[0] === "is_enabled") {
                setIsEnabled(changedValues.is_enabled);
              }
            }}
          >
            <Row className="w-full">
              {formItem.map((item) => (
                <Col
                  className="mb-[16px]"
                  span={item?.span || 8}
                  key={item.name}
                >
                  <Form.Item
                    name={item.name}
                    label={item.label}
                    rules={
                      item?.rules || [{ required: true, message: "请输入" }]
                    }
                  >
                    {!!item?.renderCustomerFormItem
                      ? item?.renderCustomerFormItem
                      : renderItem(item)}
                  </Form.Item>
                </Col>
              ))}
            </Row>
          </Form>
        </Card>
        <ButtonFixed
          loading={loading}
          hasCancel
          onOK={() => {
            handleOk("ok");
          }}
          onOkAdd={
            type !== "create"
              ? null
              : () => {
                  handleOk("add");
                }
          }
        />
      </div>
    );
  }, [warehouseType, isEnabled]);

  const handleForm = () => {
    form.setFieldsValue(defaultData);
    setWarehouseType(defaultData?.warehouse_type);
    setIsEnabled(defaultData?.is_enabled);
  };

  useEffect(() => {
    handleForm();
  }, [defaultData]);

  return {
    renderManageForm,
  };
}
